<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我听</title>
    <link rel="stylesheet" href="css/listen.css">
    <link rel="stylesheet" href="图标图标/iconfont.css">
</head>

<body>
    <header>
        <div class="L_nav">
            <p>更新</p>
            <p>订阅</p>
            <p class="on">历史</p>
            <p>下载</p>
        </div>
        <img src="img/L-1.jpg" alt="">
    </header>
    <section>
        <div class="L_choice">
            <div class="choice_box">
                <p class="on">播放历史</p>
                <p>阅读历史</p>
            </div>
            <div class="img_box">
                <img src="img/L-2.jpg" alt="">
                <img src="img/L-3.jpg" alt="">
            </div>
        </div>
        <div class="today_box">
            <p>今天</p>
            <div class="today_content">
                <dl>
                    <dt>
                        <img src="img/16.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">把生活过成自己想要的样子</p>
                        <p class="two">每天不到十分钟，就会过得很想幸福</p>
                        <div class="there">
                            <div class="lef">
                                <img src="img/L-10.png" alt="">
                                <p>09:29</p>
                                <p>已播<span>23</span>%</p>
                            </div>
                            <div class="rig">
                                <p>找相似</p>
                                <img src="img/L-3.jpg" alt="">
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/L-4.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">心灵庙语</p>
                        <p class="two">人，别精得过火，也别傻得可怜</p>
                        <div class="there">
                            <div class="lef">
                                <img src="img/L-10.png" alt="">
                                <p>89:29</p>
                                <p>已播<span>70</span>%</p>
                            </div>
                            <div class="rig">
                                <p>找相似</p>
                                <img src="img/L-3.jpg" alt="">
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/L-5.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">女性自我提升知识坊</p>
                        <p class="two">独立的女性最美丽</p>
                        <div class="there">
                            <div class="lef">
                                <img src="img/L-10.png" alt="">
                                <p>09:29</p>
                                <p>已播<span>3</span>%</p>
                            </div>
                            <div class="rig">
                                <p>找相似</p>
                                <img src="img/L-3.jpg" alt="">
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="yesterday_box">
            <p>昨天</p>
            <div class="yesterday_content">
                <dl>
                    <dt>
                        <img src="img/L-6.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">影响中国历史的100件大事</p>
                        <p class="two">华夏民族的形成 | 第一集</p>
                        <div class="there">
                            <div class="lef">
                                <img src="img/L-10.png" alt="">
                                <p>09:29</p>
                                <p>已播<span>23</span>%</p>
                            </div>
                            <div class="rig">
                                <p>找相似</p>
                                <img src="img/L-3.jpg" alt="">
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/L-7.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">一禅</p>
                        <p class="two">只要有你，我什么也不怕</p>
                        <div class="there">
                            <div class="lef">
                                <img src="img/L-10.png" alt="">
                                <p>8:29</p>
                                <p>已播<span>1</span>%</p>
                            </div>
                            <div class="rig">
                                <p>找相似</p>
                                <img src="img/L-3.jpg" alt="">
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/L-8.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">情感心理学</p>
                        <p class="two">站在对方的视角考虑所遇之事</p>
                        <div class="there">
                            <div class="lef">
                                <img src="img/L-10.png" alt="">
                                <p>09:29</p>
                                <p>已播<span>23</span>%</p>
                            </div>
                            <div class="rig">
                                <p>找相似</p>
                                <img src="img/L-3.jpg" alt="">
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="earlier_box">
            <p>更早</p>
            <div class="earlier_content">
                <dl>
                    <dt>
                        <img src="img/L-9.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">今日热点</p>
                        <p class="two">一键收听你喜欢的频道</p>
                        <div class="there">
                            <div class="lef">
                                <img src="img/L-10.png" alt="">
                                <p>09:29</p>
                                <p>已播<span>23</span>%</p>
                            </div>
                            <div class="rig">
                                <p>找相似</p>
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/L-4.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">心灵庙语</p>
                        <p class="two">人，别精得过火，也别傻得可怜</p>
                        <div class="there">
                            <div class="lef">
                                <img src="img/L-10.png" alt="">
                                <p>89:29</p>
                                <p>已播<span>70</span>%</p>
                            </div>
                            <div class="rig">
                                <p>找相似</p>
                                <img src="img/L-3.jpg" alt="">
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/16.jpg" alt="">
                    </dt>
                    <dd>
                        <p class="one">把生活过成自己想要的样子</p>
                        <p class="two">每天不到十分钟，就会过得很想幸福</p>
                        <div class="there">
                            <div class="lef">
                                <img src="img/L-10.png" alt="">
                                <p>09:29</p>
                                <p>已播<span>23</span>%</p>
                            </div>
                            <div class="rig">
                                <p>找相似</p>
                                <img src="img/L-3.jpg" alt="">
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
    </section>
    <footer>
        <dl>
            <dt class="iconfont icon-shouye"></dt>
            <dd>首页</dd>
        </dl>
        <dl>
            <dt class="iconfont icon-erji"></dt>
            <dd>我听</dd>
        </dl>
        <dl class="cen">
            <dt class="iconfont icon-bofang3"></dt>

        </dl>
        <dl>
            <dt class="iconfont icon-faxiandingdan"></dt>
            <dd>发现</dd>
        </dl>
        <dl>
            <dt class="iconfont icon-xiaoxi"></dt>
            <dd>账号</dd>
        </dl>
    </footer>
    <script src="js/flexble.js"></script>
</body>

</html>